<template>
  <el-container
    class="container"
  >
    <el-header
      class="header"
    >
      <div
        class="left"
      >
        <img
          src="~@/assets/login/avatar.svg"
          alt="头像"
          class="logo"
        >
        <h1
          class="title"
        >
          用户权限管理系统 v2.0.0
        </h1>
      </div>
      <div
        class="right"
      >
        <el-button
          type="text"
        >
          设为首页
        </el-button>
        <el-divider
          direction="vertical"
        >
        </el-divider>
        <el-button
          type="text"
        >
          收藏
        </el-button>
      </div>
    </el-header>
    <el-main
      class="main"
    >
      <img
        src="~@/assets/login/New employee-amico.svg"
        alt="插图"
        class="illustration"
      >
      <Slider
        v-if="slider.isVisible"
        @success="handleSliderSuccess"
        @close="handleSliderClose"
      >
      </Slider>
      <FormBox
        v-else
        :model="formBox.model"
        :is-loading="formBox.isLoading"
        @submit="handleFormBoxSubmit"
      >
      </FormBox>
    </el-main>
    <el-footer
      height="120"
      class="footer"
    >
      <div
        class="placeholder"
      >
      </div>
      <div
        class="information"
      >
        <span>
          博思软件（股票代码：300525）
        </span>
        <span>
          CopyRight © 2021-2031 博思软件股份有限公司
        </span>
        <span
          class="suggestion"
        >
          浏览器建议：
          <el-link
            type="danger"
            href="https://www.google.cn/intl/zh-CN/chrome/"
          >
            Chrome 90
          </el-link>
          /
          <el-link
            type="danger"
            href="https://www.microsoft.com/zh-cn/edge/home"
          >
            IE 10
          </el-link>
          以上
          <el-divider
            direction="vertical"
          >
          </el-divider>
          分辨率建议：1024 * 1960
        </span>
      </div>
      <img
        src="~@/assets/404_images/sd365Code.png"
        alt="二维码"
        width="64"
        class="qrCode"
      >
    </el-footer>
  </el-container>
</template>

<script>
import FormBox from './FormBox.vue'
import Slider from './Slider.vue'
export default {
  'name': 'Login',

  'components': {
    FormBox,
    Slider,
  },

  'data' () {
    return {
      /**
       * `登录表单`的数据
       */
      'formBox': {
        'isLoading': false,
        'model': {
          'account': '',
          'code': '',
          'password': '',
        },
      },
      /**
       * `验证滑块`
       */
      'slider': {
        'isVisible': false,
      },
    }
  },

  'methods': {
    /**
     * 处理`登录表单`的提交事件
     */
    'handleFormBoxSubmit' (formBoxModel) {
      this.formBox.model = formBoxModel
      this.slider.isVisible = true
    },
    /**
     * 处理`验证滑块`的关闭事件
     */
    'handleSliderClose' () {
      this.slider.isVisible = false
    },
    /**
     * 处理`验证滑块`的成功事件
     */
    async 'handleSliderSuccess' () {
      const {
        $store,
        $router,
        $message,
        formBox,
        slider,
      } = this
      try {
        formBox.isLoading = true
        slider.isVisible = false
        await $store.dispatch('user/login', this.formBox.model)
        $router.push('/')
      } catch (error) {
        console.error(error)
        $message.error(error)
        formBox.isLoading = false
      }
    },
  },
}
</script>

<style scoped lang="scss">

.container {
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;

    .left {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 8px;

      .logo {
        height: 100%;
      }

      .title {
        font-size: large;
        color: #030303;
      }
    }

    .right {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 8px;

      button {
        color: #030303 !important;
      }
    }
  }

  .main {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-grow: 1;

    .illustration {
      height: 100%;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 0;

    .placeholder {
      width: 64px;
      margin: 8px;
    }

    .information {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      font-size: 14px;
      color: #909399;

      .suggestion {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #f56c6c;
      }
    }

    .qrCode {
      margin: 8px;
    }
  }
}
</style>
